<template>
	<view>
		<!-- 门诊就诊指引 -->
		<UserInfoCardVue></UserInfoCardVue>
		<view class="guidance-container">

			<view class="process-container">
				<view v-for="(item,index) in processList" class="item">
					<view @click="changePayOrderNo(item.payOrderNo)">
						<view class="flex-start">
							<Title title-name="服务进程"></Title>
							<!-- <view class="mar-0-5">{{item.visitTime}}</view> -->
						</view>
						<view class="mar-0-5">{{item.doctorName}} -- {{item.departmentName}}</view>
					</view>
					<Guidance :process-list="item.child" v-if="payOrderNo==item.payOrderNo"></Guidance>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import UserInfoCardVue from '../../../components/UserInfo/UserInfoCard.vue';
	import Title from '../../../components/Title/title.vue'
	import Guidance from './components/Guidance/guidance.vue'
	import {
		patientGuidanceSelect
	} from '../../../api/patientGuidance';
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			UserInfoCardVue,
			Title,
			Guidance
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		data() {
			return {
				processList: [],
				payOrderNo: "",
			}
		},
		onLoad(e) {
			if (JSON.stringify(e) != '{}') {
				let item = JSON.parse(e.item)
				console.log(item.payOrderNo)
				this.payOrderNo = item.payOrderNo
			}
			this.init()
		},
		mounted() {
			// 根据当前patId查询是否有就诊指引
			// this.init()
		},
		methods: {
			init() {
				patientGuidanceSelect({
					patId: this.userInfo.patId,
					status: 0,
					statusOrder: 0, //表示订单未结束 1表示订单结束
					payOrderNo: this.payOrderNo,
					orderBy: "sort"
				}).then(res => {
					console.log(res)
					this.processList = res;
					let map = new Map();
					res.forEach(item => {
						if (!map.get(item.payOrderNo)) {
							map.set(item.payOrderNo, item);
						}
					})
					console.log(map)
					let list = []
					map.forEach((v, k) => {
						res.forEach(item => {
							if (k == item.payOrderNo) {
								v.child = v.child || []
								v.child.push(item)
							}
						})
						list.push(v)
					})
					this.processList = list;
					if (this.payOrderNo == "") {
						this.payOrderNo = list[0].payOrderNo
					}
				})
			},
			changePayOrderNo(e) {
				if (this.payOrderNo == e) {
					this.payOrderNo = ""
				} else {
					this.payOrderNo = e;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.guidance-container {
		// min-height: 100vh;
		padding: 16rpx;
	}

	.process-container {
		border-radius: 16rpx;

		.item {
			// background-color: rgba(114, 242, 248, 0.3);
			margin: 10px 0;
			border-radius: 16rpx;
			padding: 10px;
		}
	}
</style>